<h1>With validation</h1>
<form #f="ngForm" novalidate>

    <div class="form-group">
        <label for="foodName">Name</label>
        <input type="text" name="foodName" class="form-control" id="foodName" placeholder="Foodname" [(ngModel)]="currentFood.name"
            required>

        <div *ngIf="f?.controls?.foodName?.hasError('required') && (f?.controls?.foodName?.dirty && !f.submitted)" class="alert alert-danger">
            *
        </div>
    </div>
    <div class="form-group">
        <label for="calories">Calories</label>
        <input type="text" class="form-control" id="calories" placeholder="Calories" [(ngModel)]="currentFood.calories" required
            isNumber isInRange name="calories" #calories="ngModel">

        <div *ngIf="calories.errors?.required && (calories?.dirty && !f.submitted)" class="alert alert-danger">
            *
        </div>

        <div *ngIf="calories.errors?.isNumber && (calories?.dirty && !f.submitted)" class="alert alert-danger">
            Please enter a number
        </div>

        <div *ngIf="calories?.errors?.isInRange && (calories?.dirty && !f.submitted)" class="alert alert-danger">
            Please enter a valid number (Integer-Range)
        </div>
    </div>
    <button type="submit" class="btn btn-primary" (click)="AddOrUpdateFoodWithValidation()" [disabled]="!f?.valid">Submit</button>
</form>